<template>
  <div>
    <el-table
      :data="tableData"
      stripe
      style="width: 100%"
    >
      <el-table-column
        prop="id"
        label="设备编号"
      />
      <el-table-column
        prop="name"
        label="设备名称"
      />
      <el-table-column
        prop="customer"
        label="设备类型"
      />
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="handleClick(scope.$index, scope.row)">查看</el-button>
          <el-button type="success" size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button type="danger" size="small" @click.native.prevent="deleteRow(scope.$index, tableData)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 编辑 -->
    <el-dialog title="编辑" :visible.sync="editVisible" width="50%">
      <el-form ref="form" :model="form" label-width="100px">
        <el-form-item label="客户名称">
          <el-input v-model="form.customer" />
        </el-form-item>
        <el-form-item label="告警监测点">
          <el-input v-model="form.AlarmPoint" />
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="form.address" />
        </el-form-item>
        <el-form-item label="告警设备">
          <el-input v-model="form.device" />
        </el-form-item>
        <el-form-item label="当前值">
          <el-input v-model="form.value" />
        </el-form-item>
        <el-form-item label="动作时间">
          <el-input v-model="form.operationTiem" />
        </el-form-item>
        <el-form-item label="恢复时间">
          <el-input v-model="form.recoveryTiem" />
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="form.describe" type="textarea" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editVisible = false">取 消</el-button>
        <el-button type="warning" @click="saveEdit">远程消音并确认</el-button>
        <el-button type="primary" @click="saveEdit">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 编辑 end -->

    <!-- 查看 -->
    <el-dialog title="查看详情" :visible.sync="showVisible" width="50%">
      <el-form ref="form" :model="form" label-width="100px">
        <el-form-item label="客户名称">
          <el-input v-model="form.customer" :disabled="true" />
        </el-form-item>
        <el-form-item label="告警监测点">
          <el-input v-model="form.AlarmPoint" :disabled="true" />
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="form.address" :disabled="true" />
        </el-form-item>
        <el-form-item label="告警设备">
          <el-input v-model="form.device" :disabled="true" />
        </el-form-item>
        <el-form-item label="当前值">
          <el-input v-model="form.value" :disabled="true" />
        </el-form-item>
        <el-form-item label="动作时间">
          <el-input v-model="form.operationTiem" :disabled="true" />
        </el-form-item>
        <el-form-item label="恢复时间">
          <el-input v-model="form.recoveryTiem" :disabled="true" />
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="form.describe" type="textarea" :disabled="true" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showVisible = false">取 消</el-button>
        <el-button type="primary" @click="showVisible = false">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 查看 end -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [{
        id: '01',
        name: '黄花园大桥北箱变测试维度管',
        AlarmPoint: '万兴路隧道配电房',
        customer: '华普电力',
        Tiem: '2020/03/17  14:30',
        describe: '越事故下限发生',
        status: '未处理',
        address: '重庆市江北区万兴路隧道1#箱变',
        device: '万兴路隧道1#箱变：低压进线',
        value: 'xxxx',
        operationTiem: 'xxx',
        recoveryTiem: '2019/9/16 15:30'
      }, {
        id: '02',
        name: '黄花园大桥北箱变测试维度管',
        AlarmPoint: '万兴路隧道配电房',
        customer: '华普电力',
        Tiem: '2020/03/17  14:30',
        describe: '越事故下限发生',
        status: '未处理',
        address: '重庆市江北区万兴路隧道1#箱变',
        device: '万兴路隧道1#箱变：低压进线',
        value: 'xxxx',
        operationTiem: 'xxx',
        recoveryTiem: '2019/9/16 15:30'
      }],
      editVisible: false,
      showVisible: false,
      form: {}
    }
  },
  methods: {
    // 编辑操作
    handleEdit(index, row) {
      this.idx = index
      this.form = row
      this.editVisible = true
    },
    // 保存编辑
    saveEdit() {
      this.editVisible = false
      this.$message.success(`修改第 ${this.idx + 1} 行成功`)
      this.$set(this.tableData, this.idx, this.form)
    },
    // 查看操作
    handleClick(index, row) {
      this.idx = index
      this.form = row
      this.showVisible = true
    },
    // 删除
    deleteRow(index, rows) {
      this.open(index, rows)
    },
    open(index, rows) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        rows.splice(index, 1)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>
<style>
.el-dialog__header{
  padding: 10px 20px 10px;
  background:linear-gradient(0deg,rgba(25,145,235,1) 0%,rgba(46,161,248,1) 100%) !important;
}
.el-dialog__title {
  line-height: 24px;
  font-size: 16px;
  color: #fff;
}
.el-dialog__headerbtn .el-dialog__close {
  color: #f5f7fa;
}
.el-dialog__headerbtn{
  top:.9375rem
}
.el-dialog__body{
  padding: 20px 20px 10px 20px;
}
</style>
